<template>

	<view class="flowLaunch-v">

		<u-toast ref="uToast"></u-toast><!-- 弹窗 -->


		<view style="background-color: white;margin: 10px;border-radius: 10px;">

			<u-form :model="data" ref="uForm">

				<u-form-item class="text-input" label-width="150" label="编号 :"><u-input type="text" v-model="data.Code"
						disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="180" label="QMS检验批 :"><u-input v-model="data.InspectionLot"
						disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="批次 :"><u-input v-model="data.BatchNumber"
						disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="物料编码 :"><u-input v-model="data.MaterialCode"
						disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="物料描述 :"><u-input v-model="data.MaterialDes"
						disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="供应商 :"><u-input v-model="data.SupplierDes"
						disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="来料数量 :"><u-input v-model="data.IncomingQty"
						disabled="disabled" placeholder="" /></u-form-item>
				<u-form-item class="text-input" label-width="150" label="问题原因 :">

					<u-radio-group v-model="data.ProblemName">
						<u-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
							:disabled="item.disabled || type == 'detail'" @change="radioChange">
							{{ item.name }}
						</u-radio>
					</u-radio-group>

				</u-form-item>

				<u-form-item class="text-input" label="使用决策:" prop="Decision" label-width="150" onscroll="handleScroll">
					<shzy-select v-model="data.Decision" placeholder="请选择使用决策" :options="decisionList"
						:disabled="type == 'detail'" :props="{label:'fullName',value:'enCode'}"
						style="padding-right: 20px;"></shzy-select>
				</u-form-item>
			</u-form>
		</view>

		<view class="flow-list" v-if="instype == 'IQC' && inspection.length > 0" style="padding-bottom: 0px;">
			<view class="flow-list-box" >
				<view v-for="(item, index) in inspection" :key="item.id" :threshold="0"
						class="data-item" style="margin-bottom: 10px;">
						<view class="item" style="height: 260px;">
							<view class="item-left">

								<view class="line_item line_item_height">
									<text style="width: 100px;">报检单号:</text>
									<text>{{item.Inspectionlot}}</text>
								</view>
								<view class="line_item line_item_height">
									<text style="width: 100px;">数量:</text>
									<text>{{item.IncomingQty}}</text>
								</view>
								<view class="line_item line_item_height">
									<text style="width: 100px;">接收数量:</text>
									<text v-if="type == 'detail'">{{item.ReceiveQty}}</text>
									<u-number-box v-if="type == 'edit'" v-model="item.ReceiveQty" :min="0" :max="item.IncomingQty - item.DestructivenessQty" :step="1" :input-width="120"
										:positive-integer="false" :input-height="60" @change="QtyChange(item,'ReceiveQty')"></u-number-box>
								</view>

								<view class="line_item line_item_height">
									<text style="width: 100px;">破坏性数量:</text>
									<text v-if="type == 'detail'">{{item.DestructivenessQty}}</text>
									<u-number-box v-if="type == 'edit'" v-model="item.DestructivenessQty" :min="0" :max="item.IncomingQty - item.ReceiveQty" :step="1" :input-width="120"
										:positive-integer="false" :input-height="60" @change="QtyChange(item,'DestructivenessQty')"></u-number-box>
								</view>
								<view class="line_item line_item_height">
									<text style="width: 100px;">拒收数量:</text>
									<text>{{item.RejectQty}}</text>
								</view>
								<view class="line_item ">
									<text style="width: 100px;">备注:</text>
									<text v-if="type == 'detail'">{{item.DecisionDesc}}</text>
									<u-input v-if="type == 'edit'" v-model="item.DecisionDesc" placeholder="请输入" border
										/>
								</view>
							</view>

						</view>
					</view>
			</view>
		</view>

		<view class="flow-list" v-if="DetailList.length > 0">
			<view class="flow-list-box">
				<uni-swipe-action ref="swipeAction">
					<uni-swipe-action-item v-for="(item, index) in DetailList" :key="item.id" :threshold="0"
						class="data-item">
						<view class="item" style="height: 140px;">
							<view class="item-left">

								<text class="title u-line-1 u-font-28">不良项目 :<text
										class="titInner">{{item.innspectionName ? item.innspectionName : ''}}</text></text>
								<text class="title u-line-1 u-font-28">抽样数 :<text
										class="titInner">{{item.samplingQty ? item.samplingQty : '0'}}</text>
								</text>
								<text class="title u-line-1 u-font-28">不良数 :<text
										class="titInner">{{item.defectQty ? item.defectQty : '0'}}</text>
								</text>
								<text class="title u-line-1 u-font-28">不良率 :<text
										class="titInner">{{item.defectRate ? item.defectRate : '0'}}</text></text>

							</view>

							<view class="item-right">
								<u-tag @click="show = true;stepsList=item.itemDefectList"
									v-show="item.itemDefectList.length > 0" text="缺" mode="light" type="error" />
							</view>

						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</view>

		<!-- 
		0等待提交 	提交、提交审核、取消	
		1等待审核 	催办、取消
		2审核通过	取消
		3流程驳回  	提交、提交审核、取消	
		6完成		取消
		-->
		<!-- 只有等待审核、审核通过、流程驳回有流程信息、流转记录 -->
		<view class="buttom-actions">
			<u-button v-if="type == 'detail' && status == '1'" class="buttom-btn" @click="open('press',1)"
				type="primary">催办</u-button>
			<u-button v-if="type == 'edit' && (status == '0' || status == '3')" class="buttom-btn"
				@click="open('save',1)" type="primary">提交</u-button>
			<u-button v-if="type == 'edit' && (status == '0' || status == '3')" class="buttom-btn"
				@click="open('submit',1)" type="success">提交审核</u-button>
			<u-button class="buttom-btn" @click="cancel">取消</u-button>
		</view>

		<view>
			<u-popup v-model="show" mode="center" width="100%" height="400px"
				style="margin-left: 10px; margin-right: 10px;" closeable>
				<shzy-steps :list="stepsList" useSlot style="padding-top: 40px;">
					<template v-slot:default="{data}">
						<view class="flex-center">
							<u-tag :text="data.defectName"></u-tag> <u-tag :text="data.defectQty"
								style="margin-left:5px;"></u-tag>
						</view>
						<text>{{data.remark}}</text>
						<shzy-file v-model="data.fileInfo" showButton disabled/>

					</template>
				</shzy-steps>
			</u-popup>

		</view>

		<view>
			<u-modal v-model="showdialog" :title-style="{color: 'red'}" show-cancel-button @confirm="submit">
				<view class="slot-content">
					<u-icon name="error-circle-fill" color="#ffaa00" size="55" style="margin-right: 10px;"></u-icon>
					<rich-text :nodes="content"></rich-text>
				</view>

			</u-modal>

		</view>


	</view>

</template>
<script>
	import uNumberBox from '@/uview-ui/components/u-number-box/u-number-box.vue'
	import resources from '@/libs/resources.js'
	import upopup from '@/uview-ui/components/u-popup/u-popup.vue'
	import {
		getDictionaryDataSelector
	} from '@/api/common.js'
	import {
		defecthandlebyid,
		savedefecthandle

	} from '@/api/q1/business/inspection/unqualifiedreview.js'
	export default {

		props: {

			reviewDetailId: { // id
				type: String,
				default: ''
			},
			reviewDetailType: {
				type: String,
				default: '' // edit 编辑 detail 详情
			},
			reviewDetailStatus: {
				type: String,
				default: ''
			},
			reviewDetailinstype: {
				type: String,
				default: ''
			},
			
		},
		data() {
			return {
				showdialog: false,
				content: '',
				show: false,
				form: {
					sn: '',
					batch: ""
				},
				data: {},
				stepsList: [],
				inspection: [],
				DetailList: [],
				id: '',
				code: '',
				message: '',
				radioList: [{
						name: '供应商问题',
						disabled: false
					},
					{
						name: '非供应商问题',
						disabled: false
					}
				],
				radio: '',
				// 物料数
				decisionList: [], // 使用决策列表
				submittype: '',
				status: '',
				type: '',
				instype: '',
				clearable: false,
				desType: 'password'
			}
		},
		onLoad(e) {
			
			this.id = e.id;
			this.type = e.type;
			this.status = e.status;
			this.instype = e.instype
		},
		onShow() {

		},
		onUnload() {
			uni.$off('refresh')
		},
		mounted() {
			
			this.type = this.reviewDetailType != '' ? this.reviewDetailType : this.type;
			this.status = this.type == 'detail' ? this.reviewDetailStatus : this.status;
			this.instype = this.type == 'detail' ? this.reviewDetailinstype : this.instype;
			this.getSelect("455657197360142085"); // 不合格决策
			this.getData()
		},

		methods: {
			
			// 数量变化
			QtyChange(item, tag){
				
				// 计算拒收数量【数量-接收数量-破坏数量】
				item.RejectQty = item.IncomingQty - item.ReceiveQty - item.DestructivenessQty;
				
				if(item.RejectQty < 0){
					item.RejectQty = 0;
					item.ReceiveQty = tag == 'ReceiveQty' ? item.IncomingQty - item.DestructivenessQty : item.ReceiveQty;
					item.DestructivenessQty = tag == 'DestructivenessQty' ? item.IncomingQty - item.ReceiveQty : item.DestructivenessQty;
				}
			},
			
			// 打开弹框
			open(type, value) {

				this.submittype = type;
				this.showdialog = true;

				if (type == 'save') {
					this.content = '您确定直接提交当前不合格信息吗，是否继续?'
				} else if (type == 'press') {
					this.content = '此操作将提示该节点尽快处理，是否继续?'
				} else {
					this.content = '您确定要提交当前流程吗，是否继续?'
				}
			},
			//提交
			submit() {
				let DecisionName = ''
				this.decisionList.filter(item => {
					if (item.enCode == this.data.Decision) {
						this.$set(this.data, 'DecisionName', item.fullName)
					}
				})
				if (this.submittype == 'save') {
					this.data.Status = 6
				} else {
					this.data.Status = 0
				}


				savedefecthandle(this.data).then(res => {

					if (res.code = 200) {
						// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
						let pages = getCurrentPages()
						// 2. 上一页面实例				
						let prevPage = pages[pages.length - 2]
						// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
						prevPage.$vm.getValue("success")
						// 4. 返回上一页面
						uni.navigateBack({
							delta: 1 // 返回的页面数
						})
					}

				}).catch((err) => {
					console.log(err)
				})


			},

			radioChange(e) {
				if (e === '供应商问题') {
					this.$set(this.data, 'Problem', '1')
				} else if (e === '非供应商问题') {
					this.$set(this.data, 'Problem', '2')
				}
			},



			//取消
			cancel() {
				uni.navigateBack({
					delta: 1
				});

			},

			//获取数据
			getData() {
				
				this.id = this.reviewDetailId != '' ? this.reviewDetailId : this.id;
				if (this.id != '') {
					defecthandlebyid(this.id).then(res => {

						this.data = res.data;
						this.$set(this.data, 'ProblemName', this.data.Problem == '1' ? '供应商问题' : '非供应商问题');

						if (this.data.inspection != null) {
							this.inspection = this.data.inspection ? this.data.inspection : this.inspection;
						}
						if (this.data.DetailList != null) {
							this.DetailList = this.data.DetailList ? this.data.DetailList : this.DetailList;
						}
						if (this.type == 'detail') {
							this.$emit("getData", this.data);
						}

					}).catch(() => {
						//this.mescroll.endErr();
					})

				} else {
					this.$refs.uToast.show({
						title: '未获取到id',
						type: 'default'
					})
				}

			},

			// 加载数据字典下拉框
			getSelect(dictionaryTypeId) {

				getDictionaryDataSelector(dictionaryTypeId).then(res => {

					if (res.code == 200) {

						const list = res.data.list.map(item => {
							return {
								...item,
								id: item.enCode, // 字典项配置的编号
								label: item.fullName // 要显示的数据	
							}
						})

						if (dictionaryTypeId == '455657197360142085') this.decisionList = list; // 不合格决策

					}

				}).catch((err) => {
					this.$refs.uToast.show({
						title: '异常:' + err,
						type: 'error'
					})
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
	}

	.content {
		padding: 24rpx;
	}

	.line_item {
		display: flex;
		align-items: center;
	}

	.line_item_height {
		height: 40px;
	}

	.slot-content {
		display: flex;
		font-size: 30rpx;
		color: $u-content-color;
		padding: 30rpx;

	}

	.flowLaunch-v {
		width: 100%;

		.text-input {
			padding-left: 20rpx;
		}

		.flow-list {
			padding-bottom: 44px;
		}

		.flow-list-box {
			width: 95%;
			margin-top: 10px;
			.item {}

			.item-left-top {
				// 给图标右对齐
				width: 100%;
				text-align: right;

				.common-lable {
					font-size: 24rpx;
					padding: 2rpx 8rpx;
					margin-right: 8rpx;
					border-radius: 8rpx;
					color: #ffffff;
					border: 1px solid #ffffff;
					background-color: #6dcc51;
				}

				.urgent-lable {
					color: #E6A23C;
					border: 1px solid #E6A23C;
					background-color: #fef6e5;
				}

				.important-lable {
					color: #F56C6C;
					border: 1px solid #F56C6C;
					background-color: #fee5e5;
				}

				.title {
					width: unset;
					flex: 1;
					min-width: 0;
				}
			}
		}
	}

	.shzy-form {
		margin-top: 40rpx;
	}

	.form-item {

		margin-left: 30rpx;

		.form-input {
			margin-right: 20rpx;
		}
	}

	.buttom-btn2 {
		margin-top: 40rpx;
		margin-left: 30rpx;
		width: 42%;
		float: left;
	}

	// input
	.reviewedit-input {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 400rpx;
		height: 75rpx;
		border: 1px lightgray solid;
		border-radius: 5px;
	}
</style>